<template>
	<!-- #ifdef APP -->
	<scroll-view>
	<!-- #endif -->
		<div class="wordPage">
			<div class="menuBtn" @click="menuOpen()">目录</div>

			<div class="inputBtn" @click="inputBtnClick()">输入</div>
			<div v-if="inputContentShow" class="inputContent">
				<u--textarea v-model="inputValue" autoHeight placeholder="请输入内容" :fixed="true"></u--textarea>
			</div>

			<!-- 目录 -->
			<u-popup :show="menuShow" @close="menuClose" mode="left">
				<view style="max-height: 100vh; overflow: scroll;">
					<div class="menuTitle">目录</div>
					<uni-data-menu :localdata="localMenus" :unique-opened="true" v-model="activeMenu" active-text-color="#409eff"
						@select="MenuSelect"></uni-data-menu>
				</view>
			</u-popup>

			<!-- 单词内容区 -->
			<div class="word">
				<div class="word__title" @click="changeShowType()">
					{{ wordTitle }}
				</div>
				<div>
				</div>
				<div class="wordItem" v-for="(item, index) in currentWordData" :key="item.id">
					<div class="wordItem__title" @click="allShowChange(item, 'title')">
						<div class="starBox" @click.stop="starChange(item)">
							<uni-icons :type="item.isStar? 'star-filled':'star'" size="30" color="#f56c9f"></uni-icons>
						</div>
						<span class="wordItem__num">{{ index + 1 }}.</span>
						<template v-if="item.showAll || showType==='all' || showType==='en'">
							<span class="wordItem__word">{{ item.en }}</span>
							<span v-if="item.ph" class="wordItem__ph" @click.stop="playAudio(item.en)">[ {{ item.ph }} ]</span>
						</template>
						<span v-if="item.showAll || showType==='all' || showType==='zh'" class="wordItem__zh">
							{{ item.zh }}
						</span>
					</div>
					<div class="wordItem__eg">
						<div class="egItem" v-for="egItem in item.eg" :key="egItem.en">
							<div @click="allShowChange(egItem, 'eg')">
								<div v-if="egItem.showAll || showType==='all' || showType==='en'" class="egItemEn">
									- {{ egItem.en }}
								</div>
								<div v-if="egItem.showAll || showType==='all' || showType==='zh'" class="egItemZh">
									- {{ egItem.zh }}
								</div>
							</div>
							<u-line margin="12rpx 0"></u-line>
						</div>
					</div>
				</div>
			</div>
			<u-button text="下一章" type="primary" @click="nextChapter()"></u-button>
			<div class="footer">- 已到达最底部 - </div>
		</div>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		WordData,
		DirectoryData,
		StarData,
		GetCurrentWordData
	} from '../../Data/index';

	export default {
		data() {
			return {
				// 当前页面数据
				currentWordData: [],
				wordTitle: '',

				// 目录菜单
				menuShow: false,
				activeMenu: this.currentMenu ?? WordData[0].id,
				localMenus: DirectoryData.map(item => {
					return {
						menu_id: item.title,
						text: item.title,
						value: '',
						children: item.children.map(chapterItem => {
							return {
								menu_id: chapterItem.title,
								text: chapterItem.title,
								value: '',
								children: chapterItem.children.map(chapterChildItem => {
									return {
										menu_id: chapterChildItem.id,
										text: chapterChildItem.title,
										value: chapterChildItem.id,
									}
								})
							}
						})
					}
				}),

				// 输入框
				inputContentShow: false,
				inputValue: '',
			};
		},
		mounted() {
			console.log(this.currentMenu)
			const res = GetCurrentWordData(this.currentMenu)
			this.currentWordData = res.wordData;
			this.wordTitle = res.menu.title ?? '标题';
			this.activeMenu = this.currentMenu;
		},
		onShow() {
			console.log('word Show')
			const res = GetCurrentWordData(this.currentMenu)
			this.currentWordData = res.wordData;
			this.wordTitle = res.menu.title;
		},
		computed: {
			...mapState(['showType', 'currentMenu']),
		},
		methods: {
			...mapMutations(['setCurrentMenu', 'setShowType']),
			/** @description: 打开目录 */
			menuOpen() {
				this.menuShow = true;
			},
			/** @description: 关闭目录 */
			menuClose() {
				this.menuShow = false;
			},
			/** @description: 菜单目录选择 */
			MenuSelect(e) {
				console.log(e)
				if (e.menu_id) {
					const res = GetCurrentWordData(e.menu_id)
					this.currentWordData = res.wordData;
					this.wordTitle = res.menu.title;

					this.activeMenu = e.menu_id;
					this.setCurrentMenu(e.menu_id);
					this.menuClose();
				}
			},
			/** @description: 改变某条allShow状态 */
			allShowChange(e, type) {
				console.log(e, type)
				if (type === 'title') {
					for (const item of this.currentWordData) {
						if (item.en === e.en) {
							item.showAll = !item.showAll;
							break
						}
					}
				} else if (type === 'eg') {
					let hadFound = false;
					for (const item of this.currentWordData) {
						for (const egItem of (item.eg ?? [])) {
							if (egItem.en === e.en) {
								egItem.showAll = !egItem.showAll;
								break
							}
						}

						if (hadFound) break;
					}
				}
			},
			// 改变某条的收藏状态
			starChange(e) {
				console.log(e)
				for (const item of this.currentWordData) {
					if (item.en === e.en) {
						if (item.isStar) {
							const index = StarData.value.findIndex(starItem => starItem === item.en);
							StarData.value.splice(index, 1)
						} else {
							StarData.value.push(item.en)
						}

						item.isStar = !item.isStar;
						break
					}
				}
			},
			/** @description: 打开输入框 */
			inputBtnClick() {
				this.inputValue = '';
				this.inputContentShow = !this.inputContentShow;
			},
			/** @description 下一章 */
			nextChapter() {
				const curChapterIndex = WordData.findIndex(item => item.id === this.activeMenu);
				let nextChapterIndex = 0;
				if (curChapterIndex < WordData.length - 1) nextChapterIndex = curChapterIndex + 1;

				const res = GetCurrentWordData(WordData[nextChapterIndex].id)
				this.currentWordData = res.wordData;
				this.wordTitle = res.menu.title;

				this.activeMenu = res.menu.id;
				this.setCurrentMenu(res.menu.id);
			},
			changeShowType() {
				if (this.showType === 'all') this.setShowType('en');
				else if (this.showType === 'en') this.setShowType('zh');
				else this.setShowType('all');
			},
			/** @description: 播放语音 */
			playAudio(word) {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = `https://dict.youdao.com/dictvoice?type=0&audio=${word}`;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res);
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wordPage {
		.word {
			padding: 24rpx;
			background-color: #fff;

			.word__title {
				font-size: 48rpx;
				font-weight: 700;
				text-align: center;
				padding: 24rpx 0;
			}

			.wordItem__title {
				position: relative;
				margin-top: 24rpx;
				line-height: 84rpx;
				padding: 0 24rpx 0 72rpx;
				background-color: azure;

				.starBox {
					position: absolute;
					top: -2px;
					left: 4px;
				}
			}

			.wordItem__word {
				margin-left: 12rpx;
				color: #0630a9;
				;
			}

			.wordItem__ph {
				margin-left: 12rpx;
				color: #ff5500;
			}

			.wordItem__zh {
				margin-left: 12rpx;
			}

			.wordItem__eg {
				margin: 24rpx;
				box-shadow: 0 0rpx 20rpx #e6e6e6;
				padding: 12rpx;
			}
		}

		.menuBtn {
			position: fixed;
			z-index: 999;
			top: 124rpx;
			right: 24rpx;
			background-color: #55aaff;
			width: 84rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 42px;
			text-align: center;
			color: #fff;
		}

		.inputBtn {
			position: fixed;
			z-index: 999;
			top: 224rpx;
			right: 24rpx;
			background-color: #55aaff;
			width: 84rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 42px;
			text-align: center;
			color: #fff;
		}

		.inputContent {
			position: fixed;
			z-index: 999;
			bottom: 96rpx;
			left: 5%;
			width: 90%;
			box-shadow: 0 0rpx 20rpx #e6e6e6;
			border: 1px solid #55aaff;
		}

		.footer {
			padding: 48rpx 0;
			text-align: center;
			color: #999;
		}

		.menuTitle {
			font-size: 36rpx;
			font-weight: 700;
			padding: 24rpx;
		}
	}
</style>